<script setup lang="ts">
import {
  CloseSmall,
  FullScreen,
  MenuFoldOne,
  MenuUnfoldOne,
  Minus,
  OffScreen,
  UpdateRotation,
} from '@icon-park/vue-next'
import useStorage from '@renderer/composables/useStorage'
import { CacheEnum } from '@renderer/enum/CacheEnum'
import useMenuStore from '@renderer/layouts/admin/useMenuStore'
import { Action, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
const menuStore = useMenuStore()
const userInfo = ref<UserModel>()
const isFullScreen = ref(false)
const closeWindow = () => {
  ElMessageBox.alert('您是否要退出装企财多多？', '温馨提示', {
    showCancelButton: true,
    callback: async (action: Action) => {
      if (action == 'confirm') {
        window.api.closeWindow('config', 'destroy')
      }
    },
  })
}
const miniWindow = () => {
  window.api.miniWindow('config')
}
const screenWindow = () => {
  window.api.screenWindow('config', !isFullScreen.value)
  isFullScreen.value = !isFullScreen.value
}
const storage = useStorage()
const handleCheckUpdate = async () => {
  window.api.checkUpdate()
}
const initePage = async () => {
  userInfo.value = await storage.get(CacheEnum.USER_INFO)
}

await initePage()

window.api.version((_value) => {
  // ElMessage({ type: 'success', message: '已经是最新版本了' })
  return
})
</script>

<template>
  <div class="bg-white shadow-sm z-50 border-b-1 px-5 flex justify-between items-center h-[54px] drag">
    <div class="flex items-center">
      <div class="mr-2 nodrag" @click.stop="menuStore.toggleMenu">
        <MenuUnfoldOne
          theme="filled"
          size="32"
          fill="#888888"
          class="cursor-pointer duration-300"
          v-if="menuStore.menuState" />
        <MenuFoldOne theme="filled" size="32" fill="#888888" class="cursor-pointer duration-300" v-else />
      </div>
    </div>
    <div class="flex justify-center gap-10 items-center">
      <div class="flex items-center gap-3 nodrag">
        <el-tooltip content="检查更新" placement="bottom">
          <UpdateRotation theme="outline" size="24" class="cursor-pointer" fill="#888888" @click="handleCheckUpdate" />
        </el-tooltip>
        <div class="flex flex-col text-xs text-[#888888] font-light">
          {{ userInfo?.name }}
          <span>{{ userInfo?.type }} </span>
        </div>
        <ElImage
          :src="
            userInfo?.avatar.includes('https')
              ? userInfo?.avatar
              : 'https://cw3.obs.cn-north-4.myhuaweicloud.com/default/avatar.png'
          "
          fit="cover"
          class="w-8 h-8 rounded-full" />
      </div>
      <div class="flex items-center nodrag gap-4">
        <Minus theme="outline" size="32" class="cursor-pointer" fill="#888888" @click="miniWindow" />
        <FullScreen
          theme="outline"
          size="24"
          class="cursor-pointer"
          fill="#888888"
          @click="screenWindow"
          v-if="!isFullScreen" />
        <OffScreen theme="outline" size="24" class="cursor-pointer" fill="#888888" @click="screenWindow" v-else />
        <CloseSmall theme="outline" size="32" class="cursor-pointer" fill="#888888" @click="closeWindow" />
      </div>
    </div>
  </div>
</template>
